<script lang="ts" setup>
import { useSystemStore } from '~/stores/system'

const syStore = useSystemStore()

const sideWidth = computed(() => {
  return syStore.collapsed ? '200px' : '50px'
})
</script>

<template>
  <Head>
    <title>{{ $t('data_center') }}</title>
  </Head>
  <section class="flex flex-col w-screen h-screen">
    <div class="flex-none">
      <Header />
    </div>
    <main class="flex flex-1">
      <div class="menu" :style="{width: sideWidth}">
        <Sidebar />
      </div>
      <div class="body">
        <slot />
      </div>
    </main>
  </section>
</template>

<style lang="scss" scoped>
  section {
    background-color: var(--el-bg-color-page);
  }
  main {
    margin: 0 var(--main-space) var(--main-space);
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-radius);
  }
  .menu {
    height: 100%;
    border-radius: var(--el-radius) 0 0 var(--el-radius);
    border-right: 1px solid var(--el-border-color);
  }
  .body {
    padding: 16px;
    width: 100%;
  }
</style>